<template>
  <div class="base-menu">
    <els-elem :elem="elem" :context="{active:currentPath}"></els-elem>
  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue'
import {tree} from "../../../packages"
import {menuOptions} from "@/config/menu.config"
export default defineComponent({
  data:() => ({
    currentPath:'',
  }),
  computed:{
    menus(){return (this as any).$store.getters.menus;},
    elem(){
      const menus:any = this.menus || [];
      const childs = tree.reset(menus,(n:any) => {
        const {path,name,label,icon,target} = n;
        if(n.cls) return {...n};
        let tag = n.tag || 'el-menu-item'
        //
        let cds = []
        if(icon || label){
          // if(icon){cds.push({tag:'el-icon',cls:[{tag:icon}]})}
          if(icon){cds.push({tag:'i',class:'el-icon-edit'})}
          if(label){cds.push({tag:'span',cls:label})}
        }
        //
        if(!n.tag && n.children && n.children.length > 0){
          tag = 'el-sub-menu'
          return {tag,index:path,children:[
            {tag:'span','slot':'title',cls:cds},
            ...n.children
          ]}
        }else{
          return {tag,index:path,cls:cds}
        }
        
      })
      return {tag:'el-menu',cls:childs,...menuOptions,":defaultActive":'active'}
    },
  },
  //
  created(){
    // console.log(this.$router.currentRoute,this.$router,this.$route)
    this.currentPath = this.$route.fullPath
  },
  mounted(){
    console.log('menu elem = ', JSON.stringify(this.elem))
    
  }
})
</script>

<style lang="scss">
.el-menu{
  &.el-menu--horizontal{
    background:transparent;
    .el-sub-menu {
      background:transparent;
      .el-sub-menu__title{
        &:hover{
          background:transparent;
        }
      }
    }
    .el-menu-item{
      background:transparent !important;
      &:hover{
        background:transparent;
      }
    }
    .el-sub-menu__icon-arrow{
      color:#fff;
    }
    .el-sub-menu__title,.el-menu-item{
      i {
        color:inherit;
      }
    }
  }
}
.el-popper{
  .el-menu--horizontal{
    border:none;
    box-shadow:0 0 10px 0 #888;
    .el-menu--popup{
      background-image:linear-gradient(45deg,#aaa,#888);
      li,.el-sub-menu__title{
        background:transparent !important;
      }
      .el-sub-menu__title,.el-menu-item{
      i {
        color:inherit;
      }
      }
    }

  }
}

</style>
